import React from 'react';
import styles from './style';
import {
  View,
  SafeAreaView,
  Image,
  TextInput,
  Text,
  TouchableOpacity,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../../../common/component/back';
import style from '../../../mine/pages/downLoad/style';
import ListImg from '../../../../common/component/listImg';
const searchImg = require('../../img/search.png');
export default class Search extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      cancleText: '取消',
      tabArr: ['风景壁纸', '手绘壁纸', '哆啦A梦', '海绵宝宝', '狐妖小红娘'],
      clearStatus: true,
    };
  }
  render() {
    let {navigation} = this.props;
    let {value, cancleText, tabArr, clearStatus} = this.state;
    const searchText = (value) => {
      this.setState({value: value});
    };
    return (
      <SafeAreaView style={styles.content}>
        {/* <Back navigation={navigation}></Back> */}
        <View style={styles.searchBorder}>
          <View style={styles.searchImg}>
            <Image source={searchImg} style={styles.imgStyle}></Image>
          </View>
          <View style={styles.searchInput}>
            <TextInput
              placeholder="搜索热门壁纸"
              onChangeText={(value) => searchText(value)}
              value={value}
              onFocus={() => {
                this.setState({clearStatus: false, cancleText: '清空'});
              }}></TextInput>
          </View>
          {!clearStatus ? null : (
            <TouchableOpacity onPress={() => navigation.pop()}>
              <View style={styles.cancleText}>
                <Text>{cancleText}</Text>
              </View>
            </TouchableOpacity>
          )}

          {clearStatus ? null : (
            <TouchableOpacity
              onPress={() => {
                this.setState({clearStatus: true, cancleText: '取消'});
              }}>
              <View style={styles.cancleText}>
                <Text>{cancleText}</Text>
              </View>
            </TouchableOpacity>
          )}

          <View></View>
        </View>
        <View style={styles.bottomContent}>
          {!clearStatus ? null : (
            <Animatable.View animation="slideInUp">
              <Text style={[{color: '#C8C8C8', fontSize: 14, margin: 20}]}>
                最近搜索
              </Text>
              <View
                style={[
                  {
                    flexDirection: 'row',
                    flexWrap: 'wrap',
                    margin: 20,
                    marginTop: 0,
                  },
                ]}>
                {tabArr.map((item) => {
                  return (
                    <TouchableOpacity
                      key={item}
                      onPress={() => {
                        this.setState({clearStatus: false, cancleText: '清空'});
                      }}>
                      <View style={styles.borderStyle}>
                        <Text>{item}</Text>
                      </View>
                    </TouchableOpacity>
                  );
                })}
              </View>
            </Animatable.View>
          )}
          {clearStatus ? null : (
            <Animatable.View style={{marginTop: 20}} animation="slideInUp">
              <ListImg navigation={navigation}></ListImg>
            </Animatable.View>
          )}
        </View>
      </SafeAreaView>
    );
  }
}
